<template>
  <section
    class="promotion-section py-16 bg-gradient-to-r from-primary to-primary/80 text-white"
  >
    <div class="container flex flex-col md:flex-row items-center">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <h2 class="text-2xl md:text-3xl font-bold">夏季促销活动</h2>
        <p class="mt-4 text-white/90 max-w-lg">
          限时优惠，全场乐谱8折起！购买任意3份乐谱，即可免费获得一份精选乐谱。活动期限：6月20日-7月20日。
        </p>
        <div class="mt-8 flex space-x-4">
          <el-statistic title="天" :value="countdown.days" />
          <el-statistic title="时" :value="countdown.hours" />
          <el-statistic title="分" :value="countdown.minutes" />
          <el-statistic title="秒" :value="countdown.seconds" />
        </div>
        <el-button class="mt-8" type="primary">立即抢购</el-button>
      </div>
      <div class="md:w-1/2 relative">
        <el-image
          class="rounded-xl shadow-2xl"
          src="https://picsum.photos/800/600?random=40"
          fit="cover"
          alt="促销活动展示"
        />
      </div>
    </div>
  </section>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';

  const countdown = ref({
    days: '00',
    hours: '00',
    minutes: '00',
    seconds: '00',
  });
  let timer = null;
  function updateCountdown() {
    const endDate = new Date('2025-07-20T23:59:59').getTime();
    const now = new Date().getTime();
    const distance = endDate - now;
    countdown.value.days = String(
      Math.floor(distance / (1000 * 60 * 60 * 24))
    ).padStart(2, '0');
    countdown.value.hours = String(
      Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    ).padStart(2, '0');
    countdown.value.minutes = String(
      Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
    ).padStart(2, '0');
    countdown.value.seconds = String(
      Math.floor((distance % (1000 * 60)) / 1000)
    ).padStart(2, '0');
  }
  onMounted(() => {
    updateCountdown();
    timer = setInterval(updateCountdown, 1000);
  });
  onUnmounted(() => {
    clearInterval(timer);
  });
</script>

<style scoped>
  .promotion-section {
    background: linear-gradient(90deg, #165dff 0%, #3a8ee6 100%);
    color: #fff;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
</style>
